<template>
    <div :class="{leftMenu:true, width:show}">
        <el-menu
                default-active="1"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#304156"
                text-color="#fff"
                active-text-color="#409eff"
                :collapse="show"
        >

            <el-menu-item index="1" @click="enterXiaoquAction">
                <i class="el-icon-menu"></i>
                <span slot="title">小区管理</span>
            </el-menu-item>

            <el-submenu v-for="(v, k, i) in menuObj" :index="i + 2 + ''" :key="k" >
                <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>{{k}}</span>
                </template>
                <el-menu-item-group>

                    <el-menu-item v-for="(value, j) in v" :key="value" @click="showComponent(k,value)">{{value}}</el-menu-item>


                </el-menu-item-group>

            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name: "LeftMenuView",
        data(){
            return{
                //键是一级标题 值-数组 是二级标题
                menuObj:{
                    帮买取快递废品回收:["门店管理", "驿站管理", "商品管理", "订单管理", "废品回收订单"],
                    胖虎甄选:["商品管理","订单管理","售后订单"]
                },
                //点击二级标题切换组件  将二级标题作为键值对的键名
                //点击二级标题 查找对应的路由路径
                routerObj:{
                    门店管理:"/help/mendian",
                    驿站管理:"/help/yizhan",
                    商品管理:"/help/shangpin",
                    订单管理:"/help/dingdan",
                },
                key:"小区管理",
                value:"",
                boolean:false,
            }
        },
        methods:{
            handleOpen(value){
                console.log(value);
            },
            handleClose(value){
                console.log(value);
            },
            enterXiaoquAction(){
                this.boolean = true;
                this.$router.push("/xiaoqu").catch(()=>{});
                this.key = "小区管理";
                this.value = "";
                console.log(this.key)
                this.$emit("text",this.key);
                this.$emit("value",this.value);
            },

            //点击二级标题事件 将标题作为键作为对应的路由值 切换组件
            showComponent(key,value){
                console.log(key,value);
                this.key = key;
                this.value =value;
                console.log(this.key);
                this.$emit("text",this.key);
                this.$router.push(this.routerObj[value]).catch(()=>{});
                this.$emit("value",this.value);
            },

        },
        props:["show"],
    }
</script>

<style scoped>
    .width{
        width: 65px !important;
    }
    .leftMenu{
        width: 210px;
        /*1vh=设备高度1% 是将当前设备的高度分100分  一份就是1vh*/
        height: 100vh;
        background-color: #304156;
        position: fixed;
        left: 0;
        top: 0;
        box-sizing: border-box;
        transition: width 300ms;
        /*盒模型总宽250px*/
    }
    .el-menu-vertical-demo{
        border-right: none;
    }
    /*媒介查询 就是检测浏览器宽高的变化 做出页面布局调整*/
    @media only screen and (max-width:800px) {
        /*页面宽度在1200以内 才会执行此处代码
        max-width:1200px 最大能监听到1000px*/
        .leftMenu{
            visibility: hidden;
        }

    }

</style>